<template>
  <div style="height:100%">
    <el-menu
             style="border:0px;"
             text-color="rgb(220,212,201)"
             active-text-color="#fff"
             unique-opened="true"
             class="el-menu-vertical-demo"
             :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title">数据统计</span>
        </template>
        <el-menu-item-group>
          <a href="#/datas" @click="add_list('/datas','数据统计(地域)')">
            <el-menu-item index="1-1">数据统计(地域)</el-menu-item>
          </a>
          <a href="#/provincesales"  @click="add_list('/provincesales','省销售统计(地域)')">
            <el-menu-item index="1-2">省销售统计(地域)</el-menu-item>
          </a>
          <a href="#/citysales"  @click="add_list('/citysales','市销售统计(地域)')">
            <el-menu-item index="1-3">市销售统计(地域)</el-menu-item>
          </a>
          <a href="#/areasales"  @click="add_list('/areasales','区销售统计(地域)')">
            <el-menu-item index="1-4">区销售统计(地域)</el-menu-item>
          </a>
          <a href="#/provinceactive" @click="add_list('/provinceactive','省活跃度统计(地域)')">
            <el-menu-item index="1-5">省活跃度统计(地域)</el-menu-item>
          </a>
          <a href="#/cityactive"  @click="add_list('/cityactive','市活跃度统计(地域)')">
            <el-menu-item index="1-6">市活跃度统计(地域)</el-menu-item>
          </a>
          <a href="#/areaactive"  @click="add_list('/areaactive','区活跃度统计(地域)')">
            <el-menu-item index="1-7">区活跃度统计(地域)</el-menu-item>
          </a>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-folder"></i>
          <span slot="title">卡号管理</span>
        </template>
        <el-menu-item-group>
          <a href="#/cardcumbercatchcetting"  @click="add_list('/cardcumbercatchcetting','卡号批次设置')">
            <el-menu-item index="2-1">卡号批次设置</el-menu-item>
          </a>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-user"></i>
          <span slot="title">大客户专员专区</span>
        </template>
        <el-menu-item-group>
          <a href="#/bigcustomerlist"  @click="add_list('/bigcustomerlist','大客户专员列表')">
            <el-menu-item index="3-1">大客户专员列表</el-menu-item>
          </a>
          <a href="#/setup"  @click="add_list('/setup','设置')">
            <el-menu-item index="3-2">设置</el-menu-item>
          </a>
          <a href="#/bigcustomerorderlist"  @click="add_list('/bigcustomerorderlist','订单列表')">
            <el-menu-item index="3-3">订单列表</el-menu-item>
          </a>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-notebook-1"></i>
          <span slot="title">财务专区</span>
        </template>
        <el-menu-item-group>
          <a href="#/partnerlist"  @click="add_list('/partnerlist','钱包列表')">
            <el-menu-item index="4-1">钱包列表</el-menu-item>
          </a>
          <a href="#/financialmanagementorderlist"  @click="add_list('/financialmanagementorderlist','订单列表')">
            <el-menu-item index="4-2">订单列表</el-menu-item>
          </a>
          <a href="#/revieworderlist"  @click="add_list('/revieworderlist','审核订单列表')">
            <el-menu-item index="4-3">审核订单列表</el-menu-item>
          </a>
          <a href="#/manifestlist"  @click="add_list('/manifestlist','提现列表')">
            <el-menu-item index="4-4">提现列表</el-menu-item>
          </a>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">系统管理</span>
        </template>
        <el-menu-item-group>
          <a href="#/rersonnel"  @click="add_list('/rersonnel','人员管理')">
            <el-menu-item index="5-1">人员管理</el-menu-item>
          </a>
          <a href="#/role"  @click="add_list('/role','角色管理')"> <el-menu-item index="5-2">角色管理</el-menu-item></a>
          <a href="#/authority"  @click="add_list('/authority','权限管理')"><el-menu-item index="5-3">权限管理</el-menu-item></a>
          <a href="#/menu"  @click="add_list('/menu','菜单管理')"><el-menu-item index="5-4">菜单管理</el-menu-item></a>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
  import { eventBus } from '../main'
  export default {
    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      add_list(href, txt) {
        eventBus.$emit('adds', href, txt);
      }
    },
    mounted() {
      eventBus.$on('test', () => {
        this.isCollapse =true
      })
      eventBus.$on('back', () => {
        this.isCollapse = false
      })
    }
    }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    height: inherit;
    width: 200px;
    background-color: rgb(1, 20, 44);
  }
  a {
    text-decoration: none;
  }

  .el-menu-item {
    background-color: #010B17;
  }

    .el-menu-item:hover {
      background-color: #009ffe !important;
      color: #fff !important;
    }

  .el-submenu .el-submenu__title:hover {
    color: #fff !important;
    background-color: unset !important;

  }
  .el-submenu {
    background-color: #01142c;
  }
  .el-menu-item-group {
    background-color: #01142c;
  }
  .el-menu-item.is-active {
    background-color: #009ffe !important;
  }

  .el-menu--collapse {
    background-color: rgb(1, 20, 44);
    height: inherit;
  }
</style>
